<template>
  <div class="me-box">
    <div class="me-hread">
      <myhread3></myhread3>
      <div class="me-img"></div>
    </div>
    <div class="me-txt">
      <div class="txt-con">
        <div class="con-tlt">
          <span class="lis"></span>
          <span class="lis-txt">我的订单</span>
          <span class="lis"></span>
        </div>
      </div>
      <div class="txt-lei">
        <div class="txt-movie">
          <svg
            t="1639191211774"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="17056"
            width="40"
            height="40"
          >
            <path
              d="M512 1024C229.239467 1024 0 794.760533 0 512S229.239467 0 512 0 1024 229.239467 1024 512 794.760533 1024 512 1024z m287.698489-285.650489c-0.227556-0.068267-23.597511-9.261511-41.961245-26.396444a290.816 290.816 0 0 1-14.768355-14.791111 294.570667 294.570667 0 0 0 74.456178-196.243912c0-163.202844-132.027733-295.5264-294.912-295.5264C359.560533 205.391644 227.555556 337.7152 227.555556 500.918044 227.555556 664.143644 359.583289 796.444444 522.490311 796.444444a293.091556 293.091556 0 0 0 177.038222-59.164444c5.575111 6.030222 11.719111 12.265244 18.568534 18.614044a204.162844 204.162844 0 0 0 60.8256 38.138312c3.413333 1.274311 6.872178 1.911467 10.331022 1.911466 11.787378 0 22.960356-7.350044 27.397689-19.228444a29.946311 29.946311 0 0 0-16.952889-38.365867z"
              p-id="17057"
              fill="#e54847"
            ></path>
            <path
              d="M365.090133 560.150756a59.050667 59.050667 0 0 1-58.9824-59.096178 59.050667 59.050667 0 0 1 58.9824-59.073422 59.050667 59.050667 0 0 1 59.005156 59.073422 59.050667 59.050667 0 0 1-59.005156 59.096178zM522.353778 717.6192a59.050667 59.050667 0 0 1-58.9824-59.073422 59.050667 59.050667 0 0 1 58.9824-59.073422 59.050667 59.050667 0 0 1 58.9824 59.073422 59.005156 59.005156 0 0 1-58.9824 59.073422zM492.9536 500.918044a29.445689 29.445689 0 1 1 58.914133 0.045512 29.445689 29.445689 0 0 1-58.914133-0.045512zM522.353778 402.500267a59.050667 59.050667 0 0 1-58.9824-59.073423 59.050667 59.050667 0 0 1 58.9824-59.073422 59.050667 59.050667 0 0 1 58.9824 59.073422 59.050667 59.050667 0 0 1-58.9824 59.073423zM679.890489 560.150756a59.050667 59.050667 0 0 1-58.9824-59.096178 59.050667 59.050667 0 0 1 58.9824-59.073422 59.050667 59.050667 0 0 1 58.9824 59.073422 59.050667 59.050667 0 0 1-58.9824 59.096178z"
              p-id="17058"
              fill="#e54847"
            ></path>
          </svg>
          <div>电影</div>
        </div>
        <div class="txt-shopp">
          <svg
            t="1639191655603"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="21889"
            width="40"
            height="40"
          >
            <path
              d="M512 52C258 52 52 258 52 512s206 460 460 460 460-206 460-460S766.05 52 512 52zM317.9 275.25h381.67a22.81 22.81 0 1 1 0 45.62H317.9a22.81 22.81 0 1 1 0-45.62z m411.83 443.08c0 13.68-15.27 30.41-29 30.41h-384c-13.74 0-29-16.73-29-30.41V571.12a72.34 72.34 0 0 0 20.61 3c30.42 0 56.5-18.41 67.15-44.4a71.62 71.62 0 0 0 66.44 44.4c30.41 0 56.5-18.41 67.15-44.4a71.9 71.9 0 0 0 132.87 0c10.66 26 36.74 44.4 67.16 44.4a73.39 73.39 0 0 0 20.61-3z m-21-192.42c-37.4 0-67.17-29.65-67.17-65.39 0 36.5-29.77 65.39-66.41 65.39s-66.42-29.65-66.42-65.39c0 36.5-30.53 65.39-67.17 65.39s-66.41-29.65-66.41-65.39c0 36.5-30.54 65.39-67.18 65.39s-66.41-29.65-66.41-65.39l45.8-119.39h441.22l47.33 119.39c0 36.48-30.53 65.39-67.18 65.39z"
              fill="#31c083"
              p-id="21890"
            ></path>
          </svg>
          <div>商城</div>
        </div>
      </div>
      <div class="me-wei">
        <div class="youhui">
          <span>优惠劵</span>
          <div>
            <svg
              t="1639192186918"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="22368"
              width="16"
              height="16"
            >
              <path
                d="M224 1024c-6.4 0-19.2-6.4-25.6-12.8-12.8-12.8-12.8-32 0-44.8l512-480c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8l-512 480C236.8 1024 230.4 1024 224 1024z"
                p-id="22369"
                fill="#ccc"
              ></path>
              <path
                d="M736 544c-6.4 0-12.8 0-19.2-6.4L204.8 57.6C192 44.8 192 25.6 204.8 12.8c12.8-12.8 32-12.8 44.8 0l505.6 480c12.8 12.8 12.8 32 0 44.8C755.2 537.6 742.4 544 736 544z"
                p-id="22370"
                fill="#cdcdcd"
              ></path>
            </svg>
          </div>
        </div>
        <div class="zhekou">
          <span>折扣卡</span>
          <div>
            <svg
              t="1639192186918"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="22368"
              width="16"
              height="16"
            >
              <path
                d="M224 1024c-6.4 0-19.2-6.4-25.6-12.8-12.8-12.8-12.8-32 0-44.8l512-480c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8l-512 480C236.8 1024 230.4 1024 224 1024z"
                p-id="22369"
                fill="#ccc"
              ></path>
              <path
                d="M736 544c-6.4 0-12.8 0-19.2-6.4L204.8 57.6C192 44.8 192 25.6 204.8 12.8c12.8-12.8 32-12.8 44.8 0l505.6 480c12.8 12.8 12.8 32 0 44.8C755.2 537.6 742.4 544 736 544z"
                p-id="22370"
                fill="#cdcdcd"
              ></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div class="ipt-fot">
      <p>© 猫眼电影 客服电话：<span>1010-5335</span></p>
    </div>
  </div>
</template>

<script>
import Myhread3 from "../components/myhread3.vue";
export default {
  name: "Me",
  components: {
    Myhread3,
  },
};
</script>

<style scoped>
body,
html {
  background: #f8f9f9;
}
.me-box {
  width: 100%;
  height: 100%;
}
.me-hread {
  width: 100%;
  height: 200px;
  background: #e54847;
}
.me-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  margin: 30px auto;
}
.me-txt {
  width: 100%;
  background: #f5f5f5;
}
.me-txt .txt-con {
  width: 100%;
  background: #fff;
}
.me-txt .txt-con .con-tlt {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.me-txt .txt-con .con-tlt .lis {
  display: block;
  width: 50px;
  height: 1px;
  background: #ccc;
}
.me-txt .txt-con .con-tlt .lis-txt {
  font-size: 16px;
  padding: 0 10px;
}
.txt-lei {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
}
.txt-lei .txt-movie,
.txt-lei .txt-shopp {
  width: 100px;
  height: 50px;
  text-align: center;
  font-size: 0.4266666666666667rem;
}
.me-wei {
  width: 100%;
  background: #fff;
  margin-top: 10px;
  border-top: 1px solid #c5c5cc;
  border-bottom: 1px solid #c5c5cc;
}
.me-wei .youhui,
.me-wei .zhekou {
  width: 95%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  font-size: 16px;
}
.me-wei .zhekou {
  border-top: 1px solid #ccc;
}
.ipt-fot {
  width: 100%;
  position: fixed;
  bottom: 70px;
  font-size: 14px;
  text-align: center;
}
.ipt-fot p {
  padding-top: 5px;
  color: #999;
}
.ipt-fot p span {
  color: #faaf00;
}
</style>